<template>
    <div class="marker-container">
        <div class="marker-select-right" v-if="selectArr.length !== 0">
            <div class="marker-left">
                <div class="img-item" v-for="(item,index) in selectNum" :key="item.id">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.name}}</p>
                </div>
                <i class="left-arrow"></i>
                <i class="right-arrow"></i>
            </div>
        </div>
        <div class="marker-right" ref="selectMarker">
            <div class="select-menu" ref="selectMenuDom">
                <p @click="selectMarker(item,index)" :class="index===0?'select-menu-p':''" v-for="(item,index) in  selectMenu">
                    <span>{{item.name}}</span>
                    <i v-if="index===0"
                       :class="selectSta?'bottomArrow':'upArrow'"></i>
                </p>
            </div>
            <i class="left-arrow"></i>
            <i class="right-arrow"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AllinMarker",
        props: {
            selectArr: Array,
            selectMenuArr: Array
        },
        data() {
            return {
                selectSta: 0, // 选择点的信息
                selectNum: this.selectArr, // 横向图表
                selectMenu: this.selectMenuArr,
                // selectMenuItem: this.selectMenuArr
                map: null
            }
        },
        mounted() {
            // this.mpa = this.$Map.methods.init_map()
        },
        methods: {
            /**
             * 展开全部的点位
             */
            selectMarker(item, index) {
                this.selectSta = !this.selectSta
                if (this.selectSta) {
                    this.$refs.selectMenuDom.style.height = '100%'
                } else {
                    this.$refs.selectMenuDom.style.height = '36px'
                }
                this.selectMenu.splice(index, 1)
                this.selectMenu.unshift(item)
                if (item.name === "全部点位") {
                    this.selectNum = this.selectArr
                    this.$parent.selectMarkerItem(item)
                } else {
                    this.selectNum = [item]
                    this.$parent.selectMarkerItem(item)
                }
            },
            /*
            * 选择点位
            * */
            selectMenuItem(item, index) {

                console.log(item, this.selectNum[index])
                this.selectMenu.splice(index, 1)
                this.selectMenu.unshift(item)
                if (item.name === "全部点位") {
                    this.selectNum = this.selectArr
                    this.$parent.selectMarkerItem(item)

                } else {
                    this.selectNum = [item]
                    this.$parent.selectMarkerItem(item)
                }

                console.log(this.selectNum)
            }

        }
    }
</script>

<style scoped lang="scss">
    .marker-container {
        /*position: absolute;*/
        /*top: 24px;*/
        /*right: 20px;*/
        /*color: #fff;*/

        .marker-select-right {

            margin-right: 30px;
            position: absolute;
            right: 150px;
            top: 24px;

            .marker-left {
                background: rgba(0, 22, 52, 0.49);
                height: 59px;
                /*position: absolute;*/
                /*right: 0;*/

                .img-item {
                    float: right;
                    width: 80px;
                    height: 48px;
                    text-align: center;
                    margin: 0 8px;
                    line-height: 35px;
                    img{
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                    }
                    p {
                        font-size: 12px;
                    }
                }


                .left-arrow {
                    width: 12px;
                    height: 12px;
                    display: inline;
                    content: '';
                    position: absolute;
                    left: 0;
                    background-image: url("../../assets/right-arrow.png");
                }

                .right-arrow {
                    width: 12px;
                    height: 12px;
                    display: inline;
                    content: '';
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    background-image: url("../../assets/left-arrow.png");
                }

            }
        }


        .marker-right {
            width: 132px;
            background: rgba(0, 22, 52, 0.49);
            overflow: hidden;
            /*padding: 0 10px;*/
            position: absolute;
            right: 20px;
            top: 24px;

            .select-menu {
                width: 100%;
                height: 36px;
                text-align: center;
                margin-top: 24px;

                .select-menu-p {
                    background-image: url("../../assets/select-menu.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                /*p:nth-child(1) {*/
                /*    */
                /*}*/
                p:hover {
                    background-image: url("../../assets/select-menu.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    cursor: pointer;
                }

                p {
                    line-height: 29px;
                    font-size: 16px;
                    height: 29px;
                    margin: 5px 0px;
                }

                i {
                    display: inline-block;
                    content: '';
                    width: 11px;
                    height: 6px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 35px;
                    right: 15px;
                }

                p:hover {
                    color: #4DBAFF
                }

                .upArrow {
                    background-image: url("../../assets/select-uparrow.png");
                }

                .bottomArrow {
                    background-image: url("../../assets/bottomArrow.png");
                }
            }

            .select-menu:hover, .select-menu > *:hover {
                cursor: pointer;
            }

            .left-arrow {
                width: 12px;
                height: 12px;
                display: inline;
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background-image: url("../../assets/right-arrow.png");
            }

            .right-arrow {
                width: 12px;
                height: 12px;
                display: inline;
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                background-image: url("../../assets/left-arrow.png");
            }
        }
    }
</style>